import * as mars3d from "mars3d"
import { toRaw } from 'vue';

const Cesium = mars3d.Cesium

export const useRiver = (_graphicLayer) => {
  let graphicLayer: any = null

  let graphic: any = null

  function initRiver() {
    graphicLayer = toRaw(_graphicLayer.value);

    graphic = new mars3d.graphic.Water({
      flyTo: true,
      positions: [
        [
          121.410844,
          30.995885,
          12.9
        ],
        [
          121.413026,
          30.991808,
          18.5
        ],
        [
          121.424317,
          30.997723,
          14.1
        ],
        [
          121.422685,
          30.999919,
          17.4
        ]
      ],
      style: {
        normalMap: "https://data.mars3d.cn/img/textures/waterNormals.jpg", // 水正常扰动的法线图
        frequency: 8000.0, // 控制波数的数字。
        animationSpeed: 11.02, // 控制水的动画速度的数字。
        amplitude: 5.0, // 控制水波振幅的数字。
        specularIntensity: 0.8, // 控制镜面反射强度的数字。
        baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
        blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
        opacity: 0.7, // 透明度
        offsetAttribute: Cesium.GeometryOffsetAttribute.ALL, // 需要有
        offsetHeight: 0
      },
      attr: { remark: "示例2" }
    })
    graphicLayer.addGraphic(graphic)
    
    addRiverName()
  }


  function addRiverName() {
    const graphic = new mars3d.graphic.DivGraphic({
      position: [121.418512, 30.996715, 25.5],
      style: {
        html: `<div class="marsBlackPanel  animation-spaceInDown">
              <div class="marsBlackPanel-text">黄浦江</div>
          </div>`,
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 400000), // 按视距距离显示
        clampToGround: true,
        // 高亮时的样式
        highlight: {
          type: mars3d.EventType.click,
          className: "marsBlackPanel-highlight"
        }
      },
      attr: { remark: "示例1" }
    })
    graphicLayer.addGraphic(graphic)
  }

  async function startDraw() {
    const graphic = await graphicLayer.startDraw({
      type: "water",
      style: {
        // height: 3, // 水面高度
        normalMap: "https://data.mars3d.cn/img/textures/waterNormals.jpg", // 水正常扰动的法线图
        frequency: 8000.0, // 控制波数的数字。
        animationSpeed: 0.02, // 控制水的动画速度的数字。
        amplitude: 5.0, // 控制水波振幅的数字。
        specularIntensity: 0.8, // 控制镜面反射强度的数字。
        baseWaterColor: "#006ab4", // rgba颜色对象基础颜色的水。#00ffff,#00baff,#006ab4
        blendColor: "#006ab4", // 从水中混合到非水域时使用的rgba颜色对象。
        opacity: 0.7 // 透明度
      }
    })
    console.log("标绘完成", graphic.toJSON())
    graphicLayer.startEditing(graphic)

  }
  function stopDraw() {
    // todo 绘制完要获取到编辑后的经纬度数据，然后停止编辑
  }
  
  return {
    initRiver,
    startDraw,
    stopDraw
  }
}